<template>
  <ContentWrap>
    <el-form :model="form" label-width="80px" ref="ruleFormRef" :inline="true">
      <el-form-item label="请求方法">
        <el-select v-model="form.region" placeholder="请选择筛选方法">
          <el-option label="GET" value="GET" />
          <el-option label="POST" value="POST" />
          <el-option label="PUT" value="PUT" />
          <el-option label="DELETE" value="DELETE" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">{{ t('common.query') }}</el-button>
        <el-button @click="resetForm(ruleFormRef)">{{ t('common.reset') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="content"
      ><el-icon color="#1890ff"><InfoFilled /></el-icon>共追踪到 {{ total }} 条近期HTTP请求记录
      <strong></strong>
      <span @click="getApi">立即更新</span></div
    >
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="timestamp" label="请求时间" :formatter="formatterTime" width="180" />
      <el-table-column prop="request.method" label="请求方法" width="180">
        <template #default="scope">
          <el-tag class="mx-1" effect="dark" type="">{{ scope.row.request.method }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="request.uri" label="请求URL" />
      <el-table-column prop="response.status" label="响应状态">
        <template #default="scope">
          <el-tag class="mx-1" effect="plain" type="success">{{
            scope.row.response.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="timeTaken" label="请求耗时">
        <template #default="scope">
          <el-tag class="mx-1" effect="plain" type="success">{{ scope.row.timeTaken }}ms</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block" v-if="total > 0">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { getHttpTrace } from '@/api/httpTrace/index'
import type { FormInstance } from 'element-plus'
import { timestamp, formatDate } from './common'
const { t } = useI18n()
interface User {
  date: string
  name: string
  address: string
  tag: string
}
const ruleFormRef = ref<FormInstance>()
const tableData = ref([])
const tableDataAll = ref<any>([])
const loading = ref(true)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  // console.log(val, 'handleSizeChange')
  pageSize4.value = val
  let start = val * (currentPage4.value - 1)
  let end = val * currentPage4.value
  tableData.value = tableDataAll.value.slice(start, end)
}
const handleCurrentChange = (val: number) => {
  let start = pageSize4.value * (val - 1)
  let end = pageSize4.value * val
  // console.log(val, 'handleCurrentChange', tableDataAll.value, start, end)
  tableData.value = tableDataAll.value.slice(start, end)
}

const getApi = async () => {
  let { traces } = await getHttpTrace({})
  tableDataAll.value = traces
  tableData.value = traces.slice(0, pageSize4.value - 1)
  loading.value = false
  total.value = traces.length
}
const formatterTime = (row: any) => {
  return formatDate(row.timestamp)
}
//表单
const form = reactive({
  region: ''
})
const submitForm = async () => {
  console.log(form.region)
  if (form.region == '') {
    getApi()
  } else {
    // 筛选分页
    let { traces } = await getHttpTrace({})
    tableDataAll.value = traces
    tableDataAll.value = tableDataAll.value.filter((item) => {
      console.log(item.request.method, form.region)
      return item.request.method == form.region
    })
    // console.log(tableDataAll.value, 'submit!', form.region, tableDataAll.value.length)
    if (tableDataAll.value.length > 0) {
      tableData.value = tableDataAll.value.slice(0, pageSize4.value - 1)
    } else {
      tableData.value = []
    }
    currentPage4.value = 1
    total.value = tableDataAll.value.length
  }
}

const resetForm = (formEl: FormInstance | undefined) => {
  form.region = ''
  getApi()
}
onMounted(() => {
  getApi()
})
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  padding: 8px 15px 8px 17px;
  font-size: 14px;
  margin-bottom: 20px;
  i {
    margin-right: 4px;
  }
  strong {
    width: 1px;
    border-left: 1px solid #ccc;
    height: 16px;
    margin: 0 10px;
    display: block;
  }
  span {
    color: #1890ff;
  }
}
.demo-pagination-block {
  overflow: hidden;
  .el-pagination {
    float: right;
    padding-top: 20px;
  }
}
</style>
